<template>
    <div class="flexWrap">
        <div class="flexWrap">
            <el-form v-if="form.isDefault" ref="form" :model="form" :rules="rules" size="small" label-width="70px">
                <el-form-item prop="leader" required label="参与人" >
                    <el-select class="c-right w-px400" size="small"
                               v-model="form.leader" :disabled="!editable"
                               placeholder="请选择"
                               @change="toUpdate">
                        <el-option v-for="u in userAry" :key=u.id :label=u.name :value=u.id />
                    </el-select>
                </el-form-item>
                <el-form-item required prop="p" label="优先级">
                    <el-select class="w-px400" size="small"
                               v-model="form.p" :disabled="!editable"
                               placeholder="请选择">
                        <el-option v-for="p in pAry" :key=p.v :label=p.n :value=p.v />
                    </el-select>
                </el-form-item>
                <el-form-item prop="deadline" label="截止日期" >
                    <el-date-picker class="w-px400"
                                    v-model="form.deadline" value-format="yyyy-MM-dd" :disabled="!editable"
                                    type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-form v-else ref="form" :model="form" :rules="rules" size="small" label-width="70px">
                <el-form-item required prop="content" label="详情" >
                    <el-input :disabled="!editable" v-model="form.content" type="textarea" :rows="12"  class="w-px400" />
                </el-form-item>
                <el-form-item prop="leader" required label="参与人" >
                    <el-select class="c-right w-px400" size="small"
                               v-model="form.leader" :disabled="!editable"
                               placeholder="请选择"
                               @change="toUpdate" >
                        <el-option v-for="u in userAry" :key=u.id :label=u.name :value=u.id />
                    </el-select>
                </el-form-item>
                <el-form-item prop="detail" label="状态" >
                    <el-radio-group v-model="form.status" @change="toUpdate" >
                        <el-radio class="p-radio"
                                  v-for="v in statusAry" :label="v.v"
                        ><span :class="v.c">{{v.n}}</span></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item required prop="p" label="优先级">
                    <el-select class="w-px400" size="small"
                               v-model="form.p" :disabled="!editable" @change="toUpdate"
                               placeholder="请选择">
                        <el-option v-for="p in pAry" :key=p.v :label=p.n :value=p.v />
                    </el-select>
                </el-form-item>
                <el-form-item prop="deadline" label="截止日期" >
                    <el-date-picker class="w-px400"
                                    v-model="form.deadline" @change="toUpdate" @input="toUpdate"
                                    value-format="yyyy-MM-dd" :disabled="!editable"
                                    type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <div class="flexWrapCenter w-per100 mt-30">
            <el-button @click="toClose">取 消</el-button>
            <el-button type="primary" @click="toSubmit">保 存</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: "resource-item",
    props: {
        info: {
            type: Object
        },
        complete: {
            type:Function
        }
    },
    data() {
        return {
            tagAry: ["后端","前端"],
            pAry: [{v:1,n:"P0紧急"},{v:2,n:'P1高'},{v:3,n:'P2普通'},{v:4,n:'P1低'}],
            statusAry:[{v:1,n:'待处理',c:'status-normal'},{v:20,n:'处理中',c:'status-normal'},{v:30,n:'测试中',c:'status-normal'},{v:100,n:'已完成',c:'status-ok'},{v:-1,n:'已废弃',c:'status-fail'}],
            userAry:[],
            me:{},

            editable:true,
            form:{leader:"", deadline:''},
            rules: {
                title:[
                    { required: true, message: '任务名称不能空' },
                ],
                status:[
                    { required: true, message: '状态不能空' },
                ],
                p:[
                    { required: true, message: '优先级不能空' },
                ],
                users:[
                    { required: true, message: '参与人不能空' },
                ],

            },
        };
    },
    components: {

    },
    created() {
        this.me = this.auth.getAccount()
        this.form = this.info

        if (!this.form.users) this.form.users = []
        this.userAry = this.consts.users()

        //新建
        if (!this.form.id) {
            this.form.leader = this.me.id
            this.form.status = 1
            this.form.p = 1
            let tomorrow = new Date((new Date()).getTime() + 24 * 60 * 60 * 1000);
            this.form.deadline = this.utils.timeStr(tomorrow, "Y-M-D")
        }

        this.editable = true
        // if (!this.form.id) {
        //     this.editable = true
        // } else {
        //     for (let i = 0; i < this.me.roles.length; i++) {
        //         if (this.me.roles[i] == 1 || this.me.roles[i] == 2) {
        //             this.editable = true
        //         }
        //     }
        // }
    },
    methods: {
        toClose(){
            this.$emit("complete");
        },

        toUpdate() {
            this.$forceUpdate()
        },

        toSubmit() {
            this.$refs["form"].validate((valid) => {
                console.log(this.form)
                debugger
                if (!valid) return false

                //需求页面，并且是在新建需求
                if (!this.form.demandId && this.form.fromDemand) {
                    this.$emit("complete", this.form);
                    return
                }

                let _this = this
                this.request.post({
                    url: "job.save", data: this.form
                }).then(res => {
                    let v = _this.format.job(res.result)
                    _this.$emit("complete", v);
                },res => {
                    this.$message.error(res.msg || '保存失败')
                })
            })
        },
    },
};
</script>
<style scoped lang="scss">

</style>
